<template>
  <header class="header">
    <section class="mine" @click="toMine">
      <img class="mine-img" src="@/assets/placeholder.png" />
    </section>

    <router-link class="nav" tag="div" to="/search">
      <van-icon name="search" class="icon" />
      <span></span>
    </router-link>

    <ul>
      <li class="iconfont icon-2shoubing"></li>
      <li class="iconfont icon-youjian"></li>
    </ul>
  </header>
</template>

<script>
import { Icon as VanIcon, Toast } from 'vant'
export default {
  name: 'TheHeader',
  components: {
    VanIcon
  },
  methods: {
    toMine () {
      // TODO: 用户管理功能
      Toast('功能开发中，请稍候...')
    }
  }
}
</script>

<style lang="scss" scoped>
.header {
  position: sticky;
  top: 0;
  z-index: 99;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: rem(44px);
  line-height: rem(44px);
  padding: {
    left: rem(10px);
    right: rem(10px);
  }
  background-color: $color-white;
}
.logo {
  display: flex;
  align-items: center;
  height: 100%;
  .fa {
    font-size: rem(28px);
    color: $theme-color;
  }
}
.mine {
  display: flex;
  align-items: center;
  width: rem(26px);
  height: rem(26px);
  padding: rem(5px);
  border-radius: 50%;
  background-color: $color-grey;
  &-img {
    display: block;
    width: 100%;
    height: 100%;
  }
}
.nav {
  flex: 2;
  display: flex;
  align-items: center;
  margin: 0 rem(20px);
  background-color: $color-grey;
  padding: 0 rem(8px)  0 rem(12px);
  border-radius: rem(13px);
  color: $color-text-secondary;
  height: rem(26px);
  font-size: rem(12px);
  .icon {
    font-size: rem(16px);
  }
}
ul {
  display: flex;
  align-items: center;
  justify-content: space-around;
  li {
    margin: 0 rem(8px);
    color: #6e6e6e;
    cursor: pointer;
    &:nth-child(1) {
      font-size: rem(16px);
      font-weight: 999;
    }
    &:nth-child(2) {
      font-size: rem(23px);
    }
  }
}
</style>
